<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/global_121024_uncompress.css">
</head>
<body style="background-color: aqua;">
<h1>箭头结构及样式</h1>
<p class="note"><em>note:使用元素或符号实现箭头效果，而不是图片</em></p>

<h2>实心箭头</h2>
<p class="note"><em>note:箭头内部有颜色</em></p>
<style type="text/css">
  .container {
    width: 100px;
    padding: 20px;
    /*background-color: #fff;*/
  }
  .container>span {
    margin-right: 5px;
  }
  .icon_arr_top {
    border-left: 5px dashed transparent;
    border-right: 5px dashed transparent;
    border-top: 5px solid #2BA6E7;
    display: inline-block;

    font-size: 0;

    vertical-align: middle;
  }
  .icon_arr_right {
    border-left: 5px solid #2BA6E7;
    border-top: 5px dashed transparent;
    border-bottom: 5px dashed transparent;
    display: inline-block;

    font-size: 0;

    vertical-align: middle;
  }
  .icon_arr_bottom {
    border-left: 5px dashed transparent;
    border-right: 5px dashed transparent;
    border-bottom: 5px solid #2BA6E7;
    display: inline-block;

    font-size: 0;

    vertical-align: middle;
  }
  .icon_arr_left {
    border-top: 5px dashed transparent;
    border-bottom: 5px dashed transparent;
    border-right: 5px solid #2BA6E7;
    display: inline-block;

    font-size: 0;

    vertical-align: middle;
  }
</style>
<div class="container">
  <span class="icon_arr_top"></span>
  <span class="icon_arr_right"></span>
  <span class="icon_arr_bottom"></span>
  <span class="icon_arr_left"></span>
</div>
<div class="item">
  <p>html:</p>
  <code>
    <pre>
    </pre>
  </code>
  <p>css:</p>
  <code>
    <pre>
    </pre>
  </code>
</div>

<h2>空心箭头</h2>
<p class="note"><em>note:箭头内部没有颜色</em></p>
<div class="container">
  <span class="icon_arr_top_1"><span></span></span>
  <span class="icon_arr_right_1"><span></span></span>
  <span class="icon_arr_bottom_1"><span></span></span>
  <span class="icon_arr_left_1"><span></span></span>
</div>
<style type="text/css">
  .icon_arr_top_1 {
    border-left: 5px dashed transparent;
    border-right: 5px dashed transparent;
    border-top: 5px solid #2BA6E7;
    display: inline-block;
    position: relative;
    
    font-size: 0;

    vertical-align: middle;
  }
  .icon_arr_top_1 span {
    border-left: 4px dashed transparent;
    border-right: 4px dashed transparent;
    border-top: 4px solid #fff;
    position: absolute;
    top: -5px;
    left: -4px;
    font-size: 0;
    vertical-align: middle;
  }
  .icon_arr_right_1 {
    border-left: 5px solid #2BA6E7;
    border-top: 5px dashed transparent;
    border-bottom: 5px dashed transparent;
    display: inline-block;
    position: relative;
    font-size: 0;

    vertical-align: middle;
  }
  .icon_arr_right_1 span {
    border-left: 4px solid #fff;
    border-top: 4px dashed transparent;
    border-bottom: 4px dashed transparent;
    position: absolute;
    top: -4px;
    left: -5px;
    font-size: 0;
    vertical-align: middle;
  }
  .icon_arr_bottom_1 {
    border-left: 5px dashed transparent;
    border-right: 5px dashed transparent;
    border-bottom: 5px solid #2BA6E7;
    display: inline-block;
    position: relative;
    font-size: 0;

    vertical-align: middle;
  }
  .icon_arr_bottom_1 span {
    border-left: 4px dashed transparent;
    border-right: 4px dashed transparent;
    border-bottom: 4px solid #fff;
    position: absolute;
    top: 1px;
    left: -4px;
    font-size: 0;
    vertical-align: middle;
  }


  .icon_arr_left_1 {
    border-top: 5px dashed transparent;
    border-bottom: 5px dashed transparent;
    border-right: 5px solid #2BA6E7;
    display: inline-block;
    position: relative;
    font-size: 0;

    vertical-align: middle;
  }
  .icon_arr_left_1 span {
    border-top: 4px dashed transparent;
    border-bottom: 4px dashed transparent;
    border-right: 4px solid #fff;
    position: absolute;
    right: -5px;
    top: -4px;
    font-size: 0;
    vertical-align: middle;
  }
</style>
<div class="item">
  <p>html:</p>
  <code>
    <pre>
    </pre>
  </code>
  <p>css:</p>
  <code>
    <pre>
    </pre>
  </code>
</div>
<p class="demo">demo:</p>
<p class="note"><em>应用于实际场景中的提示箭头</em></p>
<p><span>收藏夹(向下提示框) <span class="icon_arr_top"></span></span></p>
<p><span>更多(向下提示框) <span class="icon_arr_right_1"><span></span></span></span></p>
<span>气泡提示框(向上提示框)</span>
<div class="bubble_box">
  <span class="icon_arr_bottom_1"><span></span></span>
  <p>这里是一个气泡提示框的内容</p>
</div>
<style type="text/css">
  .bubble_box {
    display: block;
    position: relative;
    top: 10px;
    left: 10px;
    *zoom: 1;
  }
  .bubble_box .icon_arr_bottom_1 {
    position: absolute;
    top: -4px;
    left: 10px;
    border-bottom-color: #D1B07C;
  }
  .bubble_box .icon_arr_bottom_1 span {
    border-bottom-color: #FFFFDA;
  }
  .bubble_box p {
    float: left;
    background-color: #FFFFDA;
    border: 1px solid #D1B07C;
    border-radius: 5px;
    padding: 2px 6px;
    color: #666;
  }
</style>


</body>
</html>